<template>
  <!-- 允许使用多个根节点 -->
  <div>{{ num }}</div>
  <div>{{ doubleNum }}</div>
  <button @click="add">点我+1</button>

  <u>
    <li v-for="(v,i) in arr" :key="i">{{ v.tilte }}</li>
  </u>
</template>


<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue'
export default defineComponent({
  // 组合 Api
  setup() {
    // 接口
    interface ItemProps {
      tilte: string
      id: number
      desc: string
    }
    // 定义变量
    const num = ref(1)
    // const arr = ref<ItemProps[]>([{
    //   tilte: 'item-1',
    //   id: 1,
    //   desc: '哈哈'
    // }, {
    //   tilte: 'item-1',
    //   id: 1,
    //   desc: '哈哈'
    // }, {
    //   tilte: 'item-1',
    //   id: 1,
    //   desc: '哈哈'
    // }])
    const data = reactive({
      arr: [{
        tilte: 'item-1',
        id: 1,
        desc: '哈哈',
        children: [1, 2, 3, 4, 5]
      }, {
        tilte: 'item-1',
        id: 1,
        desc: '哈哈'
      }, {
        tilte: 'item-1',
        id: 1,
        desc: '哈哈'
      }]
    })

    //定义计算属性                             
    // 访问ref声明变量 需要访问value
    const doubleNum = computed(() => num.value * 2)
    // 定义侦听器
    watch(num, () => {
      console.log('哈哈哈');
    })
    // 函数
    // function add() {
    //   num.value++
    // }
    const add = () => num.value++

    // 声明周期
    onMounted(() => {
      console.log(1111);
    })
    // 抛出
    return {
      num,
      ...toRefs(data),
      doubleNum,
      add
    }
  }
})
</script>